<!DOCTYPE html>
<html lang="en" ngapp="Syng">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Syng</title>

  <script>window.$ = window.jQuery = require("../src/lib/jquery/jquery.min.js");</script>

  <script>window.Vue = require("vue");</script>

  <link rel="stylesheet" href="../style/lib/iview/iview.css" />

  <script>
    var ipc = require('electron').ipcRenderer; // For communication with the main process
    var IView = require('iview');
    Vue.use(IView);

    var HanziWriter = require('hanzi-writer');

    $(document).ready(function() {
       window.lgChars = new Vue({
         el: "#lgChars",
         data: {
           simplified: '',
           traditional: '',
           simplifiedCharacters: [],
           traditionalCharacters: [],
           simplifiedFallback: false,
           traditionalFallback: false
         },
         methods: {
           animateSimplified: function() {
             var self = this;

             for(var s = 0; s < self.simplifiedCharacters.length; s++) {
               self.simplifiedCharacters[s].hideCharacter();
             }

             function animate(animatedCounter) {
               self.simplifiedCharacters[animatedCounter].animateCharacter({
                 onComplete: function() {
                   animatedCounter++;
                   if(animatedCounter < self.simplifiedCharacters.length) {
                     animate(animatedCounter);
                   }
                 }
               });
             }

             animate(0);
           },
           animateTraditional: function() {
             var self = this;

             for(var t = 0; t < self.traditionalCharacters.length; t++) {
               self.traditionalCharacters[t].hideCharacter();
             }

             function animate(animatedCounter) {
               self.traditionalCharacters[animatedCounter].animateCharacter({
                 onComplete: function() {
                   animatedCounter++;
                   if(animatedCounter < self.traditionalCharacters.length) {
                     animate(animatedCounter);
                   }
                 }
               });
             }

             animate(0);
           }
         }
       });
    });

    ipc.on('load-new-characters', function(event, args) {
      window.lgChars.$data.simplified = args.simplified;
      window.lgChars.$data.traditional = args.traditional;

      $("#simplifiedAnimated").html("");
      window.lgChars.$data.simplifiedCharacters = [];
      for(var c = 0; c < window.lgChars.$data.simplified.length; c++) {
        var animatedSimplifiedCharacter = new HanziWriter('simplifiedAnimated', window.lgChars.$data.simplified[c], {
          charDataLoader: function(char, onComplete) {
            $.getJSON("../src/lib/hanzi-writer/data/"+window.lgChars.$data.simplified[c]+".json", function(charData) {
              onComplete(charData);
            }).fail(function() {
              window.lgChars.$data.simplifiedFallback = true;
            });
          },
          height: 240,
          width: 240
        });

        window.lgChars.$data.simplifiedCharacters.push(animatedSimplifiedCharacter);
      }

      $("#traditionalAnimated").html("");
      window.lgChars.$data.traditionalCharacters = [];
      for(var c = 0; c < window.lgChars.$data.traditional.length; c++) {
        var animatedTraditionalCharacter = new HanziWriter('traditionalAnimated', window.lgChars.$data.traditional[c], {
          charDataLoader: function(char, onComplete) {
            $.getJSON("../src/lib/hanzi-writer/data/"+window.lgChars.$data.traditional[c]+".json", function(charData) {
              onComplete(charData);
            }).fail(function() {
              window.lgChars.$data.traditionalFallback = true;
            });
          },
          height: 240,
          width: 240
        });

        window.lgChars.$data.traditionalCharacters.push(animatedTraditionalCharacter);
      }

      var animatedElems = $("svg");
      for(var t = 0; t < animatedElems.length; t++) {
        $(animatedElems[t]).removeAttr("height");
        $(animatedElems[t]).removeAttr("width");
      }
    });
  </script>

  <style>
    h1 {
      font-size: 176px;
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 500;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    h2 {
      font-size: 36px;
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 500;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    h3 {
      font-size: 30px;
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 500;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    h4 {
      font-size: 24px;
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 500;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    h5 {
      font-size: 18px;
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 500;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    h6 {
      font-size: 12px;
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 500;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    #lgChars {
      font-family: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
      font-size: 13px;
      line-height: 1.6;
      overflow-y: auto;
      color: black;
    }
    svg {
      height: 57vh;
      width: 25%;
      padding-top: 7.5%;
    }
    .pull-right {
      float: right;
    }
    .action-button {
      padding-right: 15px;
    }
    .static-character {
      /* TODO: Put the appropriate font here */
    }
  </style>
</head>

<body>
  <div id="lgChars">
    <Tabs active-key="1">
      <Tab-pane label="Simplified" key="1">
        <div>
          <div class="pull-right action-button">
            <i-button v-on:click="animateSimplified()" v-if="simplifiedFallback != true">
              <Tooltip placement="left" content="Animate Stroke Order">
                <Icon type="play" size="large"></Icon>
              </Tooltip>
            </i-button>
          </div>
          <center>
            <div id="simplifiedAnimated" v-if="simplifiedFallback != true"></div>
            <div id="simplifiedStatic" v-if="simplifiedFallback == true">
              &nbsp;<h1 class="static-character">{{ simplified }}</h1>&nbsp;
            </div>
          </center>
        </div>
      </Tab-pane>
      <Tab-pane label="Traditional" key="2">
        <div>
          <div class="pull-right action-button">
            <i-button v-on:click="animateTraditional()" v-if="traditionalFallback != true">
              <Tooltip placement="left" content="Animate Stroke Order">
                <Icon type="play" size="large"></Icon>
              </Tooltip>
            </i-button>
          </div>
          <center>
            <div id="traditionalAnimated" v-if="traditionalFallback != true"></div>
            <div id="traditionalStatic" v-if="traditionalFallback == true">
              &nbsp;<h1 class="static-character">{{ traditional }}</h1>&nbsp;
            </div>
          </center>
        </div>
      </Tab-pane>
    </Tabs>
  </div>
</body>

</html>
